<template>
	<s-layout title="好友助力记录">
		<view class="ss-p-t-30">
			<view class="total ss-flex justify-between align-center ss-p-x-50">
				<view class="total-item ss-flex flex-column justify-center align-center">
					<view class="total-num">{{state.today}}</view>
					<view class="total-tips ss-m-t-20">今日好友下单</view>
				</view>
				<view class="total-item ss-flex flex-column justify-center align-center">
					<view class="total-num total-right">{{state.total}}</view>
					<view class="total-tips ss-m-t-20">好友总下单</view>
				</view>
			</view>
		</view>
		<view class="record">
			<view class="record-title ss-flex align-center">
				<view class="record-line ss-m-r-20"></view>
				<view class="record-text">好友下单记录</view>
			</view>
			<scroll-view class="record-scroll" scroll-y="true" v-if="state.loadStatus === 'more'">
				<view class="record-item ss-flex justify-between align-center ss-m-b-15"
					v-for="(item,index) in state.list" :key="index">
					<view class="record-left">{{item.user_name}}</view>
					<view class="record-right">{{item.help_time}}</view>
				</view>
			</scroll-view>
			<s-empty v-if="state.loadStatus === 'noMore'" paddingTop="100"
				icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂无数据">
			</s-empty>
			<uni-load-more v-if="state.loadStatus === 'loading'" :status="state.loadStatus" :content-text="{
						        contentdown: '上拉加载更多',
						      }" />
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const state = reactive({
		loadStatus: 'loading',
		list: [],
		today: 0,
		total: 1,
	})

	onLoad(() => {
		getData()
	})


	const getData = async () => {
		const {
			error,
			data
		} = await sheep.$api.store.getHelpList()

		if (error === 0) {
			state.list = data.list
			state.today = data.today
			state.total = data.total

			if (data.list.length >= 1) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.total {
		width: 680rpx;
		height: 141rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin: 0 auto;

		.total-item {
			.total-num {
				font-size: 32rpx;
				font-weight: bold;
				color: #F0862A;
			}

			.total-tips {
				font-size: 30rpx;
				font-weight: 350;
				color: #000000;
			}
		}
	}

	.record {
		width: 680rpx;
		height: 689rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		margin: 40rpx auto 0;
		padding: 30rpx 30rpx 0;

		.record-line {
			width: 10rpx;
			height: 42rpx;
			background: #F0862A;
		}

		.record-text {
			font-size: 32rpx;
			font-weight: normal;
			color: #000000;
		}

		.record-scroll {
			width: 100%;
			height: 575rpx;
			margin-top: 15rpx;

			.record-item {
				width: 100%;

				.record-left {
					font-size: 30rpx;
					font-weight: 350;
					color: #000000;

				}

				.record-right {
					font-size: 30rpx;
					font-weight: 350;
					color: #505050;
				}
			}
		}
	}


	.total-right {
		color: #2B2B2B !important;
	}
</style>